// 升级版Markdown编辑器样式
// 支持更多格式和文件上传功能的现代化编辑器样式
// 导入变量
@use '../variables' as *;
// 主容器样式
.markdown-editor-enhanced {
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    background: white;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

// 工具栏样式
.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fafafa;
    border-bottom: 1px solid #e4e7ed;
    flex-wrap: wrap;
    gap: 8px;
    .toolbar-section {
        display: flex;
        align-items: center;
        gap: 4px;
        .el-button-group {
            .el-button {
                padding: 6px 10px;
                border-radius: 4px;
                font-size: 12px;
                height: 32px;
                min-width: 32px;
                &:hover {
                    background: rgba($primary-color, 0.1);
                    color: $primary-color;
                    border-color: $primary-color;
                }
                .el-icon {
                    font-size: 14px;
                }
            }
        }
        .file-upload-btn {
            .el-upload {
                display: block;
            }
        }
        .el-radio-group {
            .el-radio-button__inner {
                padding: 6px 12px;
                font-size: 12px;
                height: 32px;
                line-height: 20px;
            }
        }
    }
    // 响应式工具栏
    @media (max-width: 768px) {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        .toolbar-section {
            justify-content: center;
            flex-wrap: wrap;
        }
    }
}

// 编辑器内容区域
.editor-content {
    min-height: 400px;
    // 编辑模式
    &.edit {
        .edit-panel {
            .markdown-textarea {
                 :deep(.el-textarea__inner) {
                    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
                    font-size: 14px;
                    line-height: 1.6;
                    border: none;
                    resize: vertical;
                    min-height: 400px;
                    padding: 16px;
                    &:focus {
                        box-shadow: none;
                        border: none;
                        outline: none;
                    }
                    &::placeholder {
                        color: #c0c4cc;
                        font-style: italic;
                    }
                }
            }
        }
    }
    // 预览模式
    &.preview {
        .preview-panel {
            padding: 16px;
            min-height: 400px;
            background: white;
            .preview-content {
                line-height: 1.8;
                color: $text-primary;
                // 标题样式
                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    margin: 24px 0 16px 0;
                    font-weight: 600;
                    color: $text-primary;
                    line-height: 1.4;
                }
                h1 {
                    font-size: 2rem;
                    border-bottom: 2px solid #e4e7ed;
                    padding-bottom: 8px;
                }
                h2 {
                    font-size: 1.5rem;
                    border-bottom: 1px solid #e4e7ed;
                    padding-bottom: 6px;
                }
                h3 {
                    font-size: 1.25rem;
                }
                h4 {
                    font-size: 1.125rem;
                }
                h5 {
                    font-size: 1rem;
                }
                h6 {
                    font-size: 0.875rem;
                }
                // 段落样式
                p {
                    margin: 0 0 16px 0;
                    line-height: 1.8;
                }
                // 列表样式
                ul,
                ol {
                    margin: 16px 0;
                    padding-left: 24px;
                }
                li {
                    margin: 8px 0;
                    line-height: 1.6;
                }
                // 任务列表样式
                li:has(input[type="checkbox"]) {
                    list-style: none;
                    margin-left: -24px;
                    input[type="checkbox"] {
                        margin-right: 8px;
                    }
                }
                // 引用样式
                blockquote {
                    margin: 16px 0;
                    padding: 12px 16px;
                    border-left: 4px solid $primary-color;
                    background: rgba($primary-color, 0.05);
                    color: $text-secondary;
                    border-radius: 0 4px 4px 0;
                }
                // 代码样式
                code {
                    background: #f1f3f4;
                    padding: 2px 6px;
                    border-radius: 4px;
                    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
                    font-size: 0.9em;
                    color: #e83e8c;
                }
                pre {
                    background: #f8f9fa;
                    padding: 16px;
                    border-radius: 8px;
                    overflow-x: auto;
                    margin: 16px 0;
                    border: 1px solid #e9ecef;
                    code {
                        background: none;
                        padding: 0;
                        color: $text-primary;
                        font-size: 0.875rem;
                        line-height: 1.5;
                    }
                }
                // 链接样式
                a {
                    color: $primary-color;
                    text-decoration: none;
                    &:hover {
                        text-decoration: underline;
                    }
                }
                // 图片样式
                img {
                    max-width: 100%;
                    height: auto;
                    border-radius: 8px;
                    margin: 16px 0;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                }
                // 表格样式
                table {
                    width: 100%;
                    border-collapse: collapse;
                    margin: 16px 0;
                    border: 1px solid #e9ecef;
                    th,
                    td {
                        padding: 12px;
                        border: 1px solid #e9ecef;
                        text-align: left;
                        vertical-align: top;
                    }
                    th {
                        background: #f8f9fa;
                        font-weight: 600;
                        color: $text-primary;
                    }
                    tr:nth-child(even) {
                        background: #fafafa;
                    }
                    tr:hover {
                        background: rgba($primary-color, 0.05);
                    }
                }
                // 分割线样式
                hr {
                    border: none;
                    border-top: 2px solid #e4e7ed;
                    margin: 24px 0;
                }
                // 强调样式
                strong {
                    font-weight: 600;
                    color: $text-primary;
                }
                em {
                    font-style: italic;
                    color: $text-secondary;
                }
                del {
                    text-decoration: line-through;
                    color: $text-secondary;
                }
            }
        }
    }
    // 分屏模式
    &.split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-top: 1px solid #e4e7ed;
        .edit-panel {
            border-right: 1px solid #e4e7ed;
            .markdown-textarea {
                 :deep(.el-textarea__inner) {
                    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
                    font-size: 14px;
                    line-height: 1.6;
                    border: none;
                    resize: none;
                    min-height: 400px;
                    padding: 16px;
                    &:focus {
                        box-shadow: none;
                        border: none;
                        outline: none;
                    }
                }
            }
        }
        .preview-panel {
            padding: 16px;
            min-height: 400px;
            background: white;
            overflow-y: auto;
            .preview-content {
                line-height: 1.8;
                color: $text-primary;
                // 复用预览模式的样式
                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    margin: 16px 0 12px 0;
                    font-weight: 600;
                    color: $text-primary;
                }
                h1 {
                    font-size: 1.5rem;
                }
                h2 {
                    font-size: 1.25rem;
                }
                h3 {
                    font-size: 1.125rem;
                }
                h4 {
                    font-size: 1rem;
                }
                h5 {
                    font-size: 0.875rem;
                }
                h6 {
                    font-size: 0.8rem;
                }
                p {
                    margin: 0 0 12px 0;
                    line-height: 1.6;
                }
                ul,
                ol {
                    margin: 12px 0;
                    padding-left: 20px;
                }
                li {
                    margin: 6px 0;
                    line-height: 1.5;
                }
                blockquote {
                    margin: 12px 0;
                    padding: 8px 12px;
                    border-left: 3px solid $primary-color;
                    background: rgba($primary-color, 0.05);
                    color: $text-secondary;
                }
                code {
                    background: #f1f3f4;
                    padding: 1px 4px;
                    border-radius: 3px;
                    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
                    font-size: 0.85em;
                    color: #e83e8c;
                }
                pre {
                    background: #f8f9fa;
                    padding: 12px;
                    border-radius: 6px;
                    overflow-x: auto;
                    margin: 12px 0;
                    border: 1px solid #e9ecef;
                    code {
                        background: none;
                        padding: 0;
                        color: $text-primary;
                        font-size: 0.8rem;
                    }
                }
                a {
                    color: $primary-color;
                    text-decoration: none;
                    &:hover {
                        text-decoration: underline;
                    }
                }
                img {
                    max-width: 100%;
                    height: auto;
                    border-radius: 6px;
                    margin: 12px 0;
                }
                table {
                    width: 100%;
                    border-collapse: collapse;
                    margin: 12px 0;
                    border: 1px solid #e9ecef;
                    th,
                    td {
                        padding: 8px;
                        border: 1px solid #e9ecef;
                        text-align: left;
                        font-size: 0.875rem;
                    }
                    th {
                        background: #f8f9fa;
                        font-weight: 600;
                    }
                }
                hr {
                    border: none;
                    border-top: 1px solid #e4e7ed;
                    margin: 16px 0;
                }
                strong {
                    font-weight: 600;
                }
                em {
                    font-style: italic;
                }
                del {
                    text-decoration: line-through;
                }
            }
        }
        // 响应式分屏
        @media (max-width: 768px) {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr;
            .edit-panel {
                border-right: none;
                border-bottom: 1px solid #e4e7ed;
            }
        }
    }
}

// 对话框样式
.el-dialog {
    .el-form {
        .el-form-item {
            margin-bottom: 16px;
            .el-form-item__label {
                font-weight: 500;
                color: $text-primary;
            }
            .el-input {
                .el-input__inner {
                    border-radius: 4px;
                }
            }
        }
    }
    .el-dialog__footer {
        padding: 16px 20px;
        border-top: 1px solid #e4e7ed;
    }
}

// 响应式设计
@media (max-width: 768px) {
    .markdown-editor-enhanced {
        border-radius: 6px;
    }
    .editor-toolbar {
        padding: 8px 12px;
        .toolbar-section {
            .el-button-group {
                .el-button {
                    padding: 4px 8px;
                    height: 28px;
                    min-width: 28px;
                    font-size: 11px;
                    .el-icon {
                        font-size: 12px;
                    }
                }
            }
        }
    }
    .editor-content {
        min-height: 300px;
        .edit-panel,
        .preview-panel {
            .markdown-textarea {
                 :deep(.el-textarea__inner) {
                    font-size: 13px;
                    padding: 12px;
                    min-height: 300px;
                }
            }
        }
        .preview-panel {
            padding: 12px;
            .preview-content {
                h1 {
                    font-size: 1.5rem;
                }
                h2 {
                    font-size: 1.25rem;
                }
                h3 {
                    font-size: 1.125rem;
                }
                h4 {
                    font-size: 1rem;
                }
                h5 {
                    font-size: 0.875rem;
                }
                h6 {
                    font-size: 0.8rem;
                }
                p {
                    font-size: 0.875rem;
                }
                code {
                    font-size: 0.8em;
                }
                pre {
                    padding: 8px;
                    code {
                        font-size: 0.75rem;
                    }
                }
            }
        }
    }
}

@media (max-width: 480px) {
    .editor-toolbar {
        padding: 6px 8px;
        gap: 6px;
        .toolbar-section {
            .el-button-group {
                .el-button {
                    padding: 3px 6px;
                    height: 24px;
                    min-width: 24px;
                    font-size: 10px;
                    .el-icon {
                        font-size: 11px;
                    }
                }
            }
        }
    }
    .editor-content {
        min-height: 250px;
        .edit-panel,
        .preview-panel {
            .markdown-textarea {
                 :deep(.el-textarea__inner) {
                    font-size: 12px;
                    padding: 8px;
                    min-height: 250px;
                }
            }
        }
        .preview-panel {
            padding: 8px;
            .preview-content {
                h1 {
                    font-size: 1.25rem;
                }
                h2 {
                    font-size: 1.125rem;
                }
                h3 {
                    font-size: 1rem;
                }
                h4 {
                    font-size: 0.875rem;
                }
                h5 {
                    font-size: 0.8rem;
                }
                h6 {
                    font-size: 0.75rem;
                }
                p {
                    font-size: 0.8rem;
                }
                code {
                    font-size: 0.75em;
                }
                pre {
                    padding: 6px;
                    code {
                        font-size: 0.7rem;
                    }
                }
            }
        }
    }
}

// 深色主题支持
.markdown-editor-enhanced.dark {
    background: #1a1a1a;
    border-color: #333;
    .editor-toolbar {
        background: #2a2a2a;
        border-bottom-color: #333;
        .toolbar-section {
            .el-button-group {
                .el-button {
                    background: #333;
                    border-color: #444;
                    color: #ccc;
                    &:hover {
                        background: rgba($primary-color, 0.2);
                        color: $primary-color;
                        border-color: $primary-color;
                    }
                }
            }
        }
    }
    .editor-content {
        background: #1a1a1a;
        .edit-panel {
            .markdown-textarea {
                 :deep(.el-textarea__inner) {
                    background: #1a1a1a;
                    color: #ccc;
                    border-color: #333;
                    &::placeholder {
                        color: #666;
                    }
                }
            }
        }
        .preview-panel {
            background: #1a1a1a;
            .preview-content {
                color: #ccc;
                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    color: #fff;
                }
                code {
                    background: #333;
                    color: #f8f8f2;
                }
                pre {
                    background: #2a2a2a;
                    border-color: #333;
                    code {
                        color: #ccc;
                    }
                }
                blockquote {
                    background: rgba($primary-color, 0.1);
                    border-left-color: $primary-color;
                    color: #aaa;
                }
                table {
                    border-color: #333;
                    th,
                    td {
                        border-color: #333;
                    }
                    th {
                        background: #2a2a2a;
                        color: #fff;
                    }
                    tr:nth-child(even) {
                        background: #222;
                    }
                    tr:hover {
                        background: rgba($primary-color, 0.1);
                    }
                }
                hr {
                    border-top-color: #333;
                }
            }
        }
    }
}